<template>
  <drag-dialog v-model="visible" title="参数配置" width="60%" :close-on-click-modal="false">
    <el-form label-position="right" label-suffix=":" label-width="160px">
      <el-form-item label="常量参数">
        <text-add-button @click="handleConstantParamAdd" />
        <el-table :data="localData.contantParams" max-height="200px">
          <el-table-column label="属性名" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.key" placeholder="请输入属性名" />
            </template>
          </el-table-column>
          <el-table-column label="属性值" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.value" placeholder="请输入属性值" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px" align="center">
            <template #default="scope">
              <text-delete-button @click="handleConstantParamDel(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="已有数据参数(仅弹框)">
        <text-add-button @click="handleCompParamAdd" />
        <el-table :data="localData.compParams" max-height="400px">
          <el-table-column label="属性名" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.key" placeholder="请输入属性名" />
            </template>
          </el-table-column>
          <el-table-column label="属性值" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.value" placeholder="请输入已有数据jsonpath" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template #default="scope">
              <text-delete-button @click="handleCompParamDel(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="已有数据对象">
        <el-switch v-model="localData.withFormData" />
      </el-form-item>
    </el-form>
    <template #footer>
      <dialog-footer @ok="submit" @cancel="cancel" />
    </template>
  </drag-dialog>
</template>
  
  <script>
import { cloneDeep } from 'lodash-es';

export default {
  name: 'LifeParamsSetting',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      visible: false,
      localData: {}
    };
  },
  watch: {
    modelValue: {
      handler(val) {
        this.visible = val;
      },
      immediate: true
    },
    visible: {
      handler(val) {
        this.$emit('update:modelValue', val);
      }
    },
    data: {
      handler(val) {
        if (val) {
          this.initData(val);
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 初始化数据
    initData(val) {
      this.localData = cloneDeep(val);
      if (!this.localData.contantParams) {
        this.localData.contantParams = [];
      }
      if (!this.localData.compParams) {
        this.localData.compParams = [];
      }
    },
    handleConstantParamAdd() {
      this.localData.contantParams.push({ key: '', value: '' });
    },
    handleConstantParamDel(index) {
      this.localData.contantParams.splice(index, 1);
    },
    handleCompParamAdd() {
      this.localData.compParams.push({
        key: '',
        value: ''
      });
    },
    handleCompParamDel(index) {
      this.localData.compParams.splice(index, 1);
    },
    submit() {
      this.$emit('submit', cloneDeep(this.localData));
      this.cancel();
    },
    cancel() {
      this.visible = false;
    }
  }
};
</script>